<template>
  <el-form :inline="true" style="margin-top: 20px">
    <el-form-item label="一级列表">
      <el-select
        v-model="CategoryStore.category1Id as number"
        class="m-2"
        placeholder="请选择"
        :disabled="!isShowList"
      >
        <el-option
          v-for="item in CategoryStore.category1List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级列表">
      <el-select
        v-model="(CategoryStore.category2Id as number)"
        class="m-2"
        placeholder="请选择"
        :disabled="!isShowList"
      >
        <el-option
          v-for="item in CategoryStore.category2List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="三级列表">
      <el-select
        v-model="(CategoryStore.category3Id as number)"
        class="m-2"
        placeholder="请选择"
        :disabled="!isShowList"
      >
        <el-option
          v-for="item in CategoryStore.category3List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "CategorySelect",
  });
</script>
<script lang="ts" setup>
  import { onMounted, watch, onBeforeUnmount } from "vue";
  import { useCategoryStore } from "@/stores/category";

  const CategoryStore = useCategoryStore();
  const prop = defineProps<{
    isShowList: boolean;
  }>();
  const { getCategory1List } = CategoryStore;
  onMounted(() => {
    getCategory1List();
  });

  watch(
    () => CategoryStore.category1Id,
    (val) => {
      if (val) {
        CategoryStore.getCategory2List(val);
      }
    }
  );
  watch(
    () => CategoryStore.category2Id,
    (val) => {
      if (val) {
        CategoryStore.getCategory3List(val);
      }
    }
  );

  onBeforeUnmount(() => {
    // 卸载前重置pinia中分类的状态数据
    CategoryStore.reset();
  });
</script>

<style lang="less" scoped></style>
